Kamwoo blog

일관된 theme은 컴포넌트 스타일링을 유지하고 이해하기 쉽게 만든다.

base style과 modifier style

대부분의 컴포넌트는 기본이 되는 base style과 상태나 속성에 따라서 변경되는 modifier style로 구성된다.

base style
- baseStyle
modifier style
- size
- variant
- color scheme
- color mode

Single part와 Multipart 컴포넌트

single part 컴포넌트는 단일 element를 반환하는 컴포넌트를 말한다. ex) button, badge

multipart 컴포넌트는 여러 element로 구성된 컴포넌트를 말한다. ex) modal, menu

single part

single part 컴포넌트는 baseStyle, size, variant로 style을 정의하고 theme을 extend할 수 있다.

https://www.notion.so/Single-Component-85a562981a4a472fae3d7a8d0c269023?pvs=21

defineStyleConfig

Button은 이미 chakra에 있어서 위처럼도 쓸 수 있지만, Card와 같은 경우에는 새로 정의된 컴포넌트이기 때문에 defineStyleConfig를 사용해야한다.

예를 들어서 아래와 같은 Card라는 스타일을 정의한다.

1const Card = defineStyleConfig({
2  baseStyle: {},
3  variants: {
4    smooth: {},
5  },
6  defaultProps: {
7    variant: 'smooth',
8  },
9})
10
11const theme = extendTheme({ components: { Card }})

이거는 스타일을 정의한 것이지 컴포넌트를 정의한 것이 아니다. 따라서 해당 스타일을 사용하기 위해서는 useStyleConfig hook을 사용해서 다른 컴포넌트(Box 등)에 집어 넣는다.

1import { Box, useStyleConfig } from '@chakra-ui/react'
2
3const Card = (props: { size, variant, colorScheme }) => {
4  const { variant, ...rest } = props
5  const styles = useStyleConfig('Card', { variant })
6
7  return <Box __css={styles} {...rest} />
8}

♨︎ __css는 우선순위가 낮아서 override하기 가능

Multipart

single part와 굉장히 유사하지만 몇가지가 다르다.

각 part들을 정의하고 createMultiStyleConfigHelper 로 전달한다.
각 part들에 baseStyle, sizes, variants을 전달해야한다.

예시)

1import { extendTheme } from "@chakra-ui/react"
2import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"
3
4const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['menu', 'item'])
5
6const Menu = defineMultiStyleConfig({
7	baseStyle: {
8		menu: {}
9		item: {}
10	},
11	sizes: {
12		sm: {
13			item:{}
14		},
15		md: {
16			item: {}
17		}
18	},
19	variants: {
20		solid: {
21			menu: {},
22			item: {},
23		}
24	},
25	defualtProps: {
26		size: 'md'
27	}
28})
29
30const theme = extendTheme({ components: { Menu } })

1import { createStylesContext, useMultiStyleConfig } from "@chakra-ui/react"
2
3const [ useStyles, StylesProvider ] = createStyleContext('Menu')
4
5const Menu = (props) => {
6	const { size, variant, children} = props
7	const styles = useMultiStyleConfig("Menu", { size, variant })
8
9	return (
10		<Box __css={styles.menu}>
11			<StylesProvider value={styles}>
12				{children}
13			</StylesProvider>
14		</Box>
15	)
16}
17
18const MenuItem = (props) => {
19	const styles = useStyles()
20
21	return (
22		<Box __css={styles.item} {...props} ></Box>
23	)
24}

compound component 패턴으로 만들기 좋다.

chakra ui - component style

base style과 modifier style

Single part와 Multipart 컴포넌트

single part

Multipart